<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px;
            white-space:nowrap;
            overflow:hidden; 
            text-overflow:ellipsis;
        }
        .layuimini-main{
            padding: 10px;
            padding-top: 20px;
        }
        .top{
            padding-top: 10px;
            text-align: right;
        }
        .top a{
            color:yellow;
        }
    </style>

</head>
<body>
<div class="top" >超链接：
<!--    <a href="../project/projectCompSend.html">班组工资填报</a>|-->
    <a href="../person/personPay.html?back=true">单个员工工资填报</a>|
    <a href="../project/projectCompSendList.html?back=true">工资填报结果查询</a>
</div>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">
    <div style="text-align: right;padding-bottom: 5px;cursor: pointer;font-size: 10px;">
        <span title="显示更多项目信息" id="goProjectPay" style="display: none">更多项目</span>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel" id="projectDiv1">
                <div class="layui-card-header" id="project1">项目</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md5 top-panel-number" id="person1">
                            0人
                        </div>
                        <div class="layui-col-xs3 layui-col-md7 top-panel-tips">
                            待付工资 <a style="color: #1aa094" id="yfpay1">0</a><br>
                            已付工资 <a style="color: #bd3004" id="sfpay1">0</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3" >
            <div class="layui-card top-panel" style="display: none"  id="projectDiv2">
                <div class="layui-card-header" id="project2">项目2</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md5 top-panel-number" id="person2">
                            80人
                        </div>
                        <div class="layui-col-xs3 layui-col-md7 top-panel-tips">
                            待付工资 <a style="color: #1aa094" id="yfpay2">8万</a><br>
                            已付工资 <a style="color: #bd3004" id="sfpay2">2万</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel" style="display: none"  id="projectDiv3">
                <div class="layui-card-header" id="project3">项目3</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md5 top-panel-number" id="person3">
                           20人
                        </div>
                        <div class="layui-col-xs3 layui-col-md7 top-panel-tips">
                            待付工资 <a style="color: #1aa094" id="yfpay3" >3万</a><br>
                            已付工资 <a style="color: #bd3004" id="sfpay3">1万</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel" style="display: none"  id="projectDiv4">
                <div class="layui-card-header" id="project4">项目4</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md5 top-panel-number" id="person4">
                            60人
                        </div>
                        <div class="layui-col-xs3 layui-col-md7 top-panel-tips">
                            待付工资 <a style="color: #1aa094" id="yfpay4">4万</a><br>
                            已付工资 <a style="color: #bd3004" id="sfpay4">1万</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--    <div class="layui-row layui-col-space15" >-->
<!--        <table  class="layui-table" lay-filter="tbFliter" id="tbData" style="margin: 0px"></table>-->
<!--    </div>-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>

</div>
<!--</div>-->
<script src="../assets/layui/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>

    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        setInterval(function(){ init(); }, 5*60*1000);

        init();
        function init(){
            projectInfo();
            getLineData();
            getPieData();
        }

        function projectInfo(){
            $.ajax({
                url: "../page/prolist?time="+new Date(),
                dataType: "json",
                type:"get",
                success: function (rtn) {
                    if (rtn && rtn.code===0) {
                        if(rtn.data.length>4){
                            $("#goProjectPay").show();
                        }
                        $.each(rtn.data,function (i,t){
                            i+=1;
                            $("#projectDiv"+i).show();
                            $("#project"+i).html(t.projectName);
                            $("#person"+i).html(t.personNum+"人");
                            $("#yfpay"+i).html(t.yfPay.toLocaleString()+"元");
                            $("#sfpay"+i).html(t.sfPay.toLocaleString()+"元");
                            $("#yfpay"+i).attr("title",t.yfPay.toLocaleString()+"元");
                            $("#sfpay"+i).attr("title",t.sfPay.toLocaleString()+"元");
                        })
                    }
                }
            });
        }
        
        $('#goProjectPay').on('click', function () {
            layer.open({
                type: 2,
                area: ['90%', '90%'],
                fix: false, //不固定
                maxmin: true,
                shade: 0.4,
                title: "项目工资列表",
                content: "projectPayList.html"
            });
        });
        /**
         * 报表功能
         */
        function getLineData(){
            $.ajax({
                url: "../page/proLineInfo",
                dataType: "json",
                type:"post",
                success: function (rtn) {
                    if (rtn && rtn.code===0) {
                        lineRecords(rtn.data);
                    }
                }
            });
        }
        function lineRecords(data){
            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
            var optionRecords = {
                title: {
                    text: '工资月度曲线'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    type:'scroll',
                    padding:[30, 0,0,0],
                    data:data.legend
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        data:data.xAxis,
                        axisLabel: {    //重点在这一块，其余可以忽略
                            interval: 0,   //这个一定要有，别忘记了
                            rotate: 25,
                            textStyle: {
                                color: '#000',
                                fontSize: 10
                            }
                        },
                    }
                ],
                // x轴拖动
                dataZoom: [
                    {
                        type: "slider",
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 25, //滚动条高度 
                        start: 50, //滚动条开始位置（共100等份）
                        end: 100 //结束位置（共100等份）
                    },
                    {
                        type: "inside",
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 25, //滚动条高度
                        start: 50, //滚动条开始位置（共100等份）
                        end: 100 //结束位置（共100等份）
                    }
                ],
                yAxis: [
                    {
                        name: '工资(元)',
                        type: 'value',
                        min: 0,
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }
                ],
                series:data.data
            };
            echartsRecords.setOption(optionRecords);
        }

        /**
         * 玫瑰图表
         */
        function getPieData(){
            $.ajax({
                url: "../page/proPieInfo",
                dataType: "json",
                type:"post",
                success: function (rtn) {
                    if (rtn && rtn.code===0) {
                        pieRecords(rtn.data);
                    }
                }
            });
        }
        function pieRecords(data){
            var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
            var optionPies = {
                title: {
                    text: '当月工资占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}元 ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    padding:[30, 0,0,0],
                    // data: ['项目1', '项目2', '项目3', '项目4']
                    data:data.legend
                },
                series: [
                    {
                        name: '详情',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        roseType: 'radius',
                        data:data.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            echartsPies.setOption(optionPies);
        }


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
